<template>
  <div>
    <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>HPC</el-breadcrumb-item>
          <el-breadcrumb-item>合同总表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>

    <el-card class="box-card">
      <!-- HPC信息区域 -->
      <el-row :gutter="10">
        <el-col :span="3">
            <el-select placeholder="选择筛选条件" v-model="searchCondition">
                <el-option value="code" label="合同编号">合同编号</el-option>
                <el-option value="name" label="合同名称">合同名称</el-option>
                <el-option value="person" label="项目负责人">项目负责人</el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-input :placeholder="placeholder" v-model="name" :clearable="true" @clear="clearCheck">
                <el-button slot="append" icon="el-icon-search" @click="checkName"></el-button>
            </el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="addContract">添加合同</el-button>
        </el-col>
        <el-col :span="1" :push="4">
            <el-button type="primary" @click="exportTemplate">模板</el-button>
        </el-col>
        <el-col :span="1" :push="5">
          <el-upload class="upload-demo" action="http://222.240.49.66:11501/api/contract/importExecl" 
                    :on-success="uploadFile" :show-file-list='false'>
            <el-button type="primary">导入</el-button>
          </el-upload>
        </el-col>
        <el-col :span="1" :push="6">
            <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
        <el-col :span="2" :push="7">
            <el-button type="danger" @click="removeVisible = true">批量删除</el-button>
        </el-col>
	    </el-row>

    <el-table :data="hpclist" :border='false' stripe @selection-change="selsChange" 
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="合同编号" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>{{scope.row.code}}</div>
            </template>
        </el-table-column>
        <el-table-column label="合同名称">
            <template slot-scope="scope">
                <div>{{scope.row.name}}</div>
            </template>
        </el-table-column>
        <el-table-column label="项目负责人">
            <template slot-scope="scope">
                <div>{{scope.row.person}}</div>
            </template>
        </el-table-column>
        <el-table-column label="合同内容">
            <template slot-scope="scope">
                <div>{{scope.row.content}}</div>
            </template>
        </el-table-column>
        <el-table-column label="合同有效期">
            <template slot-scope="scope">
                <div>{{scope.row.beginTime | dateFormat}} - {{scope.row.endTime | dateFormat}}</div>
            </template>
        </el-table-column>
        <el-table-column label="合同金额">
            <template slot-scope="scope">
               <div>{{scope.row.price}}</div>
            </template>
        </el-table-column>
         <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
                <el-button type="primary" size="small" plain @click="modify(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageInfo.pagenum" :page-sizes="[10]" :page-size="pageInfo.pagesize" :total ="pageInfo.totalCount"
			        @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" background >
			</el-pagination>
    </el-card>

    <add-contract ref="AddContract" @fetchData="getList"></add-contract>
    <modify-contract ref="ModifyContract" :message="tableInfo" @fetchData="getList"></modify-contract>

    <el-dialog title="提示" :visible.sync="removeVisible" width="30%">
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="removeVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import AddContract from './components/AddContract';
import ModifyContract from './components/ModifyContract';
export default {
  data() {
    return {
      activeName: '1',
      pageInfo: {
        currPage: 0,
        pageSize: 0,
        totalCount: 0,
        totalPage: 0
      },
      queryInfo: {
        limit: 10,
        page: 1,
        code: '',
        name: '',
        person: ''
      },
      hpclist: [
      ],
      name: '',
      total: 0,
      tableData: [],
      tableInfo: {},
      sels: [],
      searchCondition: 'code',
      placeholder: '请输入合同编号',
      removeVisible: false
    };
  },
  created() {
      this.getList();
  },
  components: {
    AddContract,
    ModifyContract,
  },
  watch: {
      searchCondition(){
          if(this.searchCondition == 'code'){
              this.placeholder = '请输入合同编号'
          }else if(this.searchCondition == 'name'){
              this.placeholder = '请输入合同名称'
          }else {
              this.placeholder = '请输入负责人'
          }
      }
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    addContract(){
        this.$refs['AddContract'].isShow = true;
    },
    async getList() {
      const { data: res } = await this.$http.get("contract/list", {params: this.queryInfo});
      if (res.code !== 200) {
        return this.$message.error("获取数据失败！");
      }
      this.total = res.data.totalPage;
      this.pageInfo.currPage = res.data.currPage;
      this.pageInfo.pageSize = res.data.pageSize;
      this.pageInfo.totalCount = res.data.totalCount;
      this.pageInfo.totalPage = res.data.totalPage;
      this.hpclist = res.data.list;

      console.log(this.hpclist);
    },
    async modify(row) {
        const { data: res } = await this.$http.get(`contract/${row.id}`);
            if (res.code !== 200) {
                return this.$message.error("获取数据失败！");
            }
            console.log('tet', res);
            this.tableInfo = res
        this.$refs['ModifyContract'].show();
    },
    checkName() {
      if(this.searchCondition == 'code'){
              this.queryInfo.code = this.name
          }else if(this.searchCondition == 'name'){
              this.queryInfo.name = this.name
          }else {
              this.queryInfo.person = this.name
          }
      this.getList()
    },
    clearCheck() {
      this.queryInfo.code = '',
      this.queryInfo.name = '',
      this.queryInfo.person = ''
      this.getList()
    },
    handleCurrentChange(newPage) {
		  this.queryInfo.page = newPage
		  this.getList()
	  },
    selsChange(sels) { 
    this.sels = sels;
    },
    async remove(row) {
      let ids = [];
      row.forEach(element => {
        ids.push(element.id)
      });
      const { data: res } = await this.$http.delete("contract", {data:ids});
      if (res.code !== 200) {
        return this.$message.error("操作失败！");
      }
      this.getList()
    },
    removeConfirm() {
        this.remove(this.sels)
        this.removeVisible = false
    },
    uploadFile() {
      this.$message.success("上传成功")
      this.getList()
    },
    exportExcel() {
      window.open('http://222.240.49.66:11501/api/contract/export','数据')
    },
    exportTemplate() {
      window.open('http://222.240.49.66:11501/api/contract/template','数据')
    }
  },
  filters: {
    dateFormat (val) {
      if (val == null || val == '') {
        return ''
      } else {
        let d = new Date(val)
        let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
        let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
        let times = d.getFullYear() + '/' + month + '/' + day
        return times
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>